<template>
  <el-dialog
    title="字体字号配置"
    :visible.sync="open"
    width="90%"
    append-to-body
    @close="closeDialog"
    custom-class="business-dialog fixed-dialog font-dialog"
    :close-on-click-modal="false"
    top="20px"
  >
    <div class="btns">
      <el-button type="primary" size="small" @click="handleSubmit" :loading="saveLoading">保存</el-button>
    </div>
    <div class="content">
      <el-form ref="queryForm" label-width="auto" size="small" v-loading="loading">
        <el-row :gutter="20" class="row-title">
          <el-col :span="2">
            <el-form-item>业别</el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>位置</el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>文字内容</el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>字体（中文）</el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>是否加粗</el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>字号（中文）</el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>字体（西文）</el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>是否加粗</el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>字号（西文）</el-form-item>
          </el-col>
        </el-row>
        <div class="table-body">
          <el-row :gutter="20" v-for="(item, index) in dataList" :key="item.id">
            <el-col :span="2">
              <el-form-item>{{ Names[item.pageType] || item.pageType }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>{{ item.location }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>{{ item.content }}</el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <span v-if="readonly">{{ item.enableZhSelect ? item.fontFamilyZh : '-' }}</span>
                <el-select v-else-if="item.enableZhSelect" v-model="dataList[index].fontFamilyZh" style="width: 100%">
                  <el-option v-for="item in fontFamilyList" :key="item" :label="item" :value="item" />
                </el-select>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <span v-if="readonly">{{ item.enableZhSelect ? (Number(item.fontBoldZh) ? '是' : '否') : '-' }}</span>
                <el-select v-else-if="item.enableZhSelect" v-model="dataList[index].fontBoldZh" style="width: 100%">
                  <el-option label="是" :value="'1'" />
                  <el-option label="否" :value="'0'" />
                </el-select>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <span v-if="readonly">{{ item.enableZhSelect ? item.fontSizeZh : '-' }}</span>
                <el-select v-else-if="item.enableZhSelect" v-model="dataList[index].fontSizeZh" style="width: 100%">
                  <el-option v-for="item in fontSizeList" :key="item.label" :label="item.label" :value="item.label" />
                </el-select>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <span v-if="readonly">{{ item.enableEnSelect ? item.fontFamilyEn : '-' }}</span>
                <el-select v-else-if="item.enableEnSelect" v-model="dataList[index].fontFamilyEn" style="width: 100%">
                  <el-option v-for="item in fontFamilyList" :key="item" :label="item" :value="item" />
                </el-select>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <span v-if="readonly">{{ item.enableEnSelect ? (Number(item.fontBoldEn) ? '是' : '否') : '-' }}</span>
                <el-select v-else-if="item.enableEnSelect" v-model="dataList[index].fontBoldEn" style="width: 100%">
                  <el-option label="是" :value="'1'" />
                  <el-option label="否" :value="'0'" />
                </el-select>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <span v-if="readonly">{{ item.enableEnSelect ? item.fontSizeEn : '' }}</span>
                <el-select v-else-if="item.enableEnSelect" v-model="dataList[index].fontSizeEn" style="width: 100%">
                  <el-option v-for="item in fontSizeList" :key="item.label" :label="item.label" :value="item.label" />
                </el-select>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { getFontStyleList, updateRuleFonts } from '@/api/business'
import { fontSizeList } from '@/constants/fontsizemap'
import { Message } from 'element-ui'

const Names = {
  cover: '封面',
  signature: '签署页',
  revision: '更改记录页',
  contents: '目次',
  content: '正文',
  foreword: '前言',
  introduction: '引言',
  annex: '附录',
  reference: '参考文献',
  index: '索引',
  page_header: '页眉'
}
export default {
  name: 'StructureSetting',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentRule: {
      type: Object,
      default: () => ({})
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(val) {
      this.open = val
    },
    currentRule(val) {
      if (val.id) {
        this.handleQuery()
      }
    }
  },
  data() {
    return {
      open: this.visible,
      loading: false,
      dataList: [],
      form: {},
      fonts: [],
      saveLoading: false,
      fontSizeList,
      fontFamilyList: ['宋体', '黑体', 'Times New Roman'],
      Names
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
      this.$emit('onClose')
    },
    handleQuery() {
      if (!this.currentRule?.id) return
      this.loading = true
      getFontStyleList({
        ruleId: this.currentRule.id
      })
        .then((res) => {
          this.dataList = res.data.map((i) => ({
            ...i,
            // logo不能修改
            // cover第四行 文件名称 的西文不可修改
            // cover第五行 文件英文名称 的中文不可修改
            enableZhSelect: !(i.content.includes('LOGO') || (i.pageType === 'cover' && i.content === '文件英文名称')),
            enableEnSelect: !(i.content.includes('LOGO') || (i.pageType === 'cover' && i.content === '文件名称'))
          }))
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSubmit() {
      let list = JSON.parse(JSON.stringify(this.dataList))
      list = list.map((i) => ({ ...i, expressionIds: i.expressionIds?.join(',') }))
      this.saveLoading = true
      updateRuleFonts({
        ruleId: this.currentRule.id,
        list
      })
        .then((res) => {
          this.saveLoading = false
          Message.success('保存成功')
          this.open = false
        })
        .finally(() => {
          this.saveLoading = false
        })
    }
  }
}
</script>
<style>
.fixed-dialog .el-dialog__body {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
.font-dialog .el-row {
  border-bottom: 1px solid #ddd;
}
.fixed-dialog .el-row {
  padding-top: 15px;
}
.fixed-dialog .el-row.row-title {
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}
.fixed-dialog .table-body {
  max-height: calc(100vh - 320px);
  overflow: auto;
}
</style>
<style scoped>
.content {
  padding: 24px;
}
.btns {
  margin-left: 24px;
}
</style>
